<template>
  <div class="IT-maintenance-box">
    <content-title
      titleTop="IT operations and maintenance"
      title="IT运维支持"
      titleTips="500+名资深运维工程师、研发工程师、信息化专家全力为您创业保驾"
    ></content-title>
    <div class="maintenance-content">
      <div
        class="main-flex"
        v-for="(item, index) in showListData"
        :key="index + 'buss'"
      >
        <buy-version :item="item" @onBuyClick="onBuyClick"></buy-version>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, computed } from "vue";
import contentTitle from "../content-title/content-title.vue";
import buyVersion from "../buy-version/buy-version.vue";
import type { BuyVersion } from "@/views/home/components/buy-version/types";
interface Events {
  (e: "onBuyClick", value: BuyVersion): void;
}
interface Props {
  /**数据列表  */
  list: any;
}

const props = withDefaults(defineProps<Props>(), {
  list: [],
});

const emits = defineEmits<Events>();

const versionList: BuyVersion[] = reactive([
  {
    versionName: "省心版",
    oldPrice: "行业价格1200每年",
    price: 298,
    unit: "年",
    versionList: [
      {
        title: "软件安装 升级服务",
        tips: "微信公众号/小程序；电脑/手机网站；抖音 商城/快手商城；支付宝小程序等",
        active: true,
      },
      {
        title: "运维服务",
        tips: "软件基础问题排查，保障您的基础设施 7*24小时安全稳定运行",
        active: true,
      },
      {
        title: "在线咨询",
        tips: "在线实时沟通，快速解决您的问题",
        active: true,
      },
      {
        title: "有源码修改",
        tips: "有源码的前提下满足业务需要针对部分功能进行修改",
        active: false,
      },
      {
        title: "★ 无源码修改",
        tips: "没有源码，也可以针对部分功能进行修改",
        active: false,
      },
      {
        title: "一对一专家服务",
        tips: "7x8小时服务响应， 快速完成服务交付",
        active: false,
      },
    ],
  },
  {
    versionName: "无忧版",
    oldPrice: "行业价格1800每年",
    price: 960,
    unit: "年",
    versionList: [
      {
        title: "软件安装 升级服务",
        tips: "微信公众号/小程序；电脑/手机网站；抖音 商城/快手商城；支付宝小程序等",
        active: true,
      },
      {
        title: "运维服务",
        tips: "软件基础问题排查，保障您的基础设施 7*24小时安全稳定运行",
        active: true,
      },
      {
        title: "在线咨询",
        tips: "在线实时沟通，快速解决您的问题",
        active: true,
      },
      {
        title: "有源码修改",
        tips: "有源码的前提下满足业务需要针对部分功能进行修改",
        active: true,
      },
      {
        title: "★ 无源码修改",
        tips: "没有源码，也可以针对部分功能进行修改",
        active: false,
      },
      {
        title: "一对一专家服务",
        tips: "7x8小时服务响应， 快速完成服务交付",
        active: false,
      },
    ],
  },
  {
    versionName: "专家版",
    oldPrice: "行业价格3000每年",
    price: 1198,
    unit: "年",
    versionList: [
      {
        title: "软件安装 升级服务",
        tips: "微信公众号/小程序；电脑/手机网站；抖音 商城/快手商城；支付宝小程序等",
        active: true,
      },
      {
        title: "运维服务",
        tips: "软件基础问题排查，保障您的基础设施 7*24小时安全稳定运行",
        active: true,
      },
      {
        title: "在线咨询",
        tips: "在线实时沟通，快速解决您的问题",
        active: true,
      },
      {
        title: "有源码修改",
        tips: "有源码的前提下满足业务需要针对部分功能进行修改",
        active: true,
      },
      {
        title: "★ 无源码修改",
        tips: "没有源码，也可以针对部分功能进行修改",
        active: true,
      },
      {
        title: "一对一专家服务",
        tips: "7x8小时服务响应， 快速完成服务交付",
        active: true,
      },
    ],
  },
  {
    versionName: "定制版",
    oldPrice: "",
    price: 0,
    unit: "",
    versionList: [],
  },
]);

const showListData = computed((): BuyVersion[] => {
  let showList: BuyVersion[] = [];
  if (props.list.length > 0) {
    props.list.forEach((item: any, index: number) => {
      if (versionList[index] && index < 3) {
        let data: BuyVersion = JSON.parse(JSON.stringify(versionList[index]));
        data.versionName = item.name;
        data.price = item.price;
        data.id = item.id;
        showList.push(data);
      }
    });
    // showList.push(versionList[3]);
  } else {
    showList.push(...versionList);
  }
  return showList;
});

const onBuyClick = (item: BuyVersion) => {
  emits("onBuyClick", item);
};
</script>
<style lang="less">
@import "@/style/var.less";
@media (min-width: 750px) {
  .maintenance-content {
    display: flex;
    margin-top: 30px;
    .main-flex:frist-child {
      margin-left: 0px;
    }
    .main-flex {
      flex: 1;
      margin-left: 9px;
    }
  }
}
@media (max-width: 750px) {
  .IT-maintenance-box {
    padding: 0 8px;

    .maintenance-content {
      margin-top: 30px;
      .main-flex:frist-child {
        margin-top: 0px;
      }
      .main-flex {
        margin-top: 28px;
      }
    }
  }
}
</style>
